"use client";

import { useEffect, useState } from "react";
import { ArrowUpRightIcon } from "@heroicons/react/24/outline";

interface WeChatShareGuideProps {
  onClose: () => void;
}

export default function WeChatShareGuide({ onClose }: WeChatShareGuideProps) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    setVisible(true);
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "auto";
    };
  }, []);

  return (
    <div
      role="dialog"
      aria-modal="true"
      className={`fixed inset-0 z-[1000] transition-opacity duration-200 ${
        visible ? "opacity-100" : "opacity-0"
      }`}
      onClick={onClose}
      style={{
        background: "rgba(0,0,0,0.5)",
        backdropFilter: "blur(10px)",
      }}
    >
      {/* 右上角箭头指示 */}
      <div className="absolute top-5 right-10">
        <ArrowUpRightIcon className="w-8 h-8 text-white drop-shadow-lg" />
      </div>

      {/* 顶部右侧引导气泡 */}
      <div className="absolute top-50 left-1/2 -translate-x-1/2">
        {/* 引导气泡卡片 */}
        <div
          className="pointer-events-auto bg-white/95 text-gray-900 rounded-2xl shadow-xl px-4 py-3 max-w-[260px]"
          onClick={(e) => e.stopPropagation()}
        >
          <p className="text-base font-semibold">点击右上角“···”菜单</p>
          <p className="text-sm text-gray-600 mt-1">
            选择 “转发给朋友” 或 “分享到朋友圈”
          </p>
        </div>
      </div>

      {/* 底部关闭按钮 */}
      <div className="absolute top-100 left-1/2 -translate-x-1/2">
        <button
          type="button"
          onClick={(e) => {
            e.stopPropagation();
            onClose();
          }}
          className="px-5 py-2 rounded-full bg-white/90 text-gray-900 font-medium shadow hover:bg-white focus:outline-none"
        >
          我知道了
        </button>
      </div>
    </div>
  );
}
